<template>
  <div>
    <div class="head">
      <a href="#">
        <img :src="img1" />
      </a>
    </div>

    <div id="first">
      <div class="title1">
        <p>国内疫情分布地图展览</p>
        <h1>数据更新至 2021.01.07 14:55</h1>
      </div>
      <iframe
        src="http://47.102.195.7/effectScatter-bmap.html"
        frameborder="0"
        class="img1"
      ></iframe>
    </div>

    <div class="title2">
      <p>香港18区疫情确诊人数密度</p>
      <h2>疫情数据来自baidu</h2>
    </div>
    <div id="second"></div>

    <div class="title3">
      <p>最近确诊人数上升部分省份</p>
      <h3>疫情数据来自baidu</h3>
    </div>
    <div id="third"></div>

    <div class="footer">
      <h3>想了解更多？</h3>
      <a
        href="https://voice.baidu.com/act/newpneumonia/newpneumonia/?from=osari_aladin_banner"
      >
        <div class="button">
          <el-row>
            <el-button type="success">点我看更多</el-button>
          </el-row>
        </div>
      </a>
    </div>
  </div>
</template>

<script>
import geoJson from "./HK.json";
let echarts = require("echarts");
export default {
  data() {
    return {
      img1: require("../assets/p12.jpg"),
    };
  },
  computed: {},
  methods: {
    // 第一幅图已导入
    /* getOption1(){
      return{};
    }, */

    // 第二幅图
    getOption2() {
      return {
        title: {
          // text: '香港18区疫情确诊人数密度',
          // subtext: '疫情数据来自baidu',
          sublink:
            "http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12",
        },
        tooltip: {
          trigger: "item",
          formatter: "{b}<br/>{c} (p / km2)",
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {},
          },
        },
        visualMap: {
          min: 800,
          max: 50000,
          text: ["High", "Low"],
          realtime: false,
          calculable: true,
          inRange: {
            color: ["lightskyblue", "yellow", "orangered"],
          },
        },
        series: [
          {
            name: "香港18区疫情确诊人数密度",
            type: "map",
            mapType: "HK", // 自定义扩展图表类型
            label: {
              show: true,
            },
            data: [
              { name: "中西区", value: 20057.34 },
              { name: "湾仔", value: 15477.48 },
              { name: "东区", value: 31686.1 },
              { name: "南区", value: 6992.6 },
              { name: "油尖旺", value: 44045.49 },
              { name: "深水埗", value: 40689.64 },
              { name: "九龙城", value: 37659.78 },
              { name: "黄大仙", value: 45180.97 },
              { name: "观塘", value: 55204.26 },
              { name: "葵青", value: 21900.9 },
              { name: "荃湾", value: 4918.26 },
              { name: "屯门", value: 5881.84 },
              { name: "元朗", value: 4178.01 },
              { name: "北区", value: 2227.92 },
              { name: "大埔", value: 2180.98 },
              { name: "沙田", value: 9172.94 },
              { name: "西贡", value: 3368 },
              { name: "离岛", value: 806.98 },
            ],
            // 自定义名称映射
            nameMap: {
              "Central and Western": "中西区",
              Eastern: "东区",
              Islands: "离岛",
              "Kowloon City": "九龙城",
              "Kwai Tsing": "葵青",
              "Kwun Tong": "观塘",
              North: "北区",
              "Sai Kung": "西贡",
              "Sha Tin": "沙田",
              "Sham Shui Po": "深水埗",
              Southern: "南区",
              "Tai Po": "大埔",
              "Tsuen Wan": "荃湾",
              "Tuen Mun": "屯门",
              "Wan Chai": "湾仔",
              "Wong Tai Sin": "黄大仙",
              "Yau Tsim Mong": "油尖旺",
              "Yuen Long": "元朗",
            },
          },
        ],
      };
    },

    // 第三幅图
    getOption3() {
      return {
        legend: {},
        tooltip: {},
        dataset: {
          dimensions: ["product", "10月份", "11月份", "12月份"],
          source: [
            { product: "上海", "10月份": 70, "11月份": 85, "12月份": 98 },
            { product: "香港", "10月份": 12, "11月份": 20, "12月份": 33 },
            { product: "广东", "10月份": 86.4, "11月份": 65.2, "12月份": 82.5 },
            { product: "河北", "10月份": 23, "11月份": 10, "12月份": 2 },
          ],
        },
        xAxis: { type: "category" },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{ type: "bar" }, { type: "bar" }, { type: "bar" }],
      };
    },
    toDraw() {
      // 导入JSON

      let chart2 = echarts.init(document.getElementById("second"));
      let chart3 = echarts.init(document.getElementById("third"));
      chart2.hideLoading();
      echarts.registerMap("HK", geoJson);
      let option2 = this.getOption2();
      let option3 = this.getOption3();
      chart2.setOption(option2);
      chart3.setOption(option3);
    },
  },
  created() {
    setTimeout(() => {
      this.toDraw();
    }, 1000);
  },
  mounted() {},
};
</script>
<style scoped>
.head img {
  height: 200px;
  width: 100%;
}
#first {
  margin-top: 50px;
  height: 600px;
}
.title1 {
  color: #000;
  font-size: 35px;
  font-weight: 600;
  margin-top: 0px;
  margin-left: 0px;
}
.img1 {
  width: 100%;
  height: 650px;
}
.title1 p {
  font-size: 20px;
  font-weight: bold;
  line-height: 0px;
  margin-bottom: 30px;
}
.title1 h1 {
  font-size: 13px;
  color: darkgray;
  margin-top: 0;
  margin-left: 0;
  line-height: 10px;
}
#second {
  height: 600px;
}
.title2 {
  margin-top: 150px;
}
.title2 p {
  margin: 0;
  font-size: 20px;
  font-weight: bold;
}
.title2 h2 {
  font-size: 13px;
  color: darkgray;
}

#third {
  height: 600px;
}
.title3 {
  margin-top: 100px;
}
.title3 p {
  margin: 0;
  font-size: 20px;
  font-weight: bold;
}
.title3 h3 {
  font-size: 13px;
  color: darkgray;
}

.footer {
  position: relative;
  top: 30px;
  left: 550px;
  display: inline-block;
}
.footer h3 {
  color: darkgray;
  font-size: 14px;

  /* text-align: center; */
}
</style>